<template>
  <div class="member-layout">
      <div class="grid-content bor-radius-10 mg-bo-10 pos-relative card-row"
           @click="handler(index)"
      >
          <mu-paper class="demo-paper" :zDepth="2" >
          <div style="position:absolute; z-index:1;left: 4px; top: 2px;">

            <el-checkbox @change="setUser" v-model="state" v-show="isMutpart"></el-checkbox>
              <el-radio class="radio" v-model="currentRadio.index" :label="index" v-show="!isMutpart"> &nbsp;</el-radio>

          </div>

          <div class="card-01" style="position:relative; z-index:2;">
              <div v-show="!isRole" class="info-img">
                  <img v-if="item.portraitName" :src="static_url + item.portraitName">
                  <img v-else-if="item.pictureName" :src="static_url + item.pictureName">
                  <img v-else-if="item.ownerPortrait" :src="static_url + item.ownerPortrait">
                  <img v-else src="../../../static/img/member.png">
              </div>
            <span class="member-name l1">{{item.name}}</span>

            <slot></slot>

          </div>

          <div class="btn-info" v-show="buttonText">
              <span @click.stop="viewClick" style="cursor: default">{{buttonText}}</span>
          </div>
          <!-- <span>Checked names: {{ checkedNames }}</span> -->
          </mu-paper>
      </div>
  </div>
</template>

<script>
    export default {
        props: {
          currentRadio:{
              type:Object,
               default:function () {
                   return {
                       index:-1
                   }
               }
          },
            item: '',
            index: '',
            backSelectItems:'',
            // classText: '',   // 状态文本和样式对象
            buttonText: '',   // 按钮文本(查看)
            isMutpart:{
                type:Boolean,
                default:false
            },
            isRole:{
                type:Boolean,
                default:false
            },
            viewClick:{       //点击查看
                type:Function,
//                default:function(){alert("并未实现查看接口");},
                required:false
            },
            backItems:{
                type:Function,
                default:function(){},
                required:false
            },

        },
        data: function () {

            return {
                classItem: [],
                checkedNames: [],

                state: false,

                static_url: this.$cfg.static_url + "/"
            }
        },
        methods: {
            handler: function (index) {
              this.state = !this.state;
              this.currentRadio.index = index;
              this.setUser();
            },
            setUser: function () {

              if(this.isMutpart){
                console.log(12)
                if(this.state){
                  console.log(this.item)
                     this.getChildItem(this.item);
                }else{
                    this.deleteChildItem(this.item);
                }
                console.log(this.backSelectItems)
                this.backItems(this.backSelectItems);
              }else {
                this.backItems(this.item);
              }
            },
            getChildItem(res){
              console.log(res);
                this.backSelectItems.push(res);
                console.log(this.backSelectItems)
            },
            deleteChildItem(res){
                let self = this;

                let arr = this.backSelectItems.filter(function (item) {
                  console.log(item)
                    if(item!=res){
                      console.log(item)
                        return item;
                    }
                });

                this.backSelectItems.splice(0, this.backSelectItems.length);

                arr.forEach(item => {
                    this.backSelectItems.push(item);
                });

                console.log(this.backSelectItems)



            },
        },


    }
</script>

<style scoped>
    .card-01{
      border-bottom: none;
    }
    .l1{
          text-indent: initial;
          /*margin-top: -24px;*/
    }
    .info-img{
        width: 90px;
        height: 90px;
        margin: 10px auto;
        border-radius: 50%;
        /*border:1px solid #cacaca;*/
    }
    .info-img img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        margin: 0;
    }


</style>
